<template>
  <div class="xtx-pay-checkout-page">
    <div class="container">
      <div class="wrapper">
        <!-- 收货地址 -->
        <section>
          <h3 class="box-title">收货地址</h3>
          <div class="box-body">
            <div class="address">
              <div class="text">
                <div class="none" v-if="!curAddress">
                  您需要先添加收货地址才可提交订单。
                </div>
                <ul v-else>
                  <li>
                    <span>收<i />货<i />人：</span>{{ curAddress.receiver }}
                  </li>
                  <li><span>联系方式：</span>{{ curAddress.contact }}</li>
                  <li><span>收货地址：</span>{{ curAddress.address }}</li>
                </ul>
              </div>
              <div class="action">
                <el-button size="large" @click="openDialog()">地址管理</el-button>
              </div>
            </div>
          </div>
        </section>

        <AddressDialog ref="addressDialog" @success="onSuccess" />

        <!-- 商品信息 -->
        <section>
          <h3 class="box-title">商品信息</h3>
          <div class="box-body">
            <table class="goods">
              <thead>
                <tr>
                  <th width="520">商品信息</th>
                  <th width="170">单价</th>
                  <th width="170">数量</th>
                  <th width="170">总价</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="i in checkInfo.orderGoodsList" :key="i.id">
                  <td>
                    <a href="javascript:;" class="info">
                      <img :src="i.picture" alt="" />
                      <div class="right">
                        <p>{{ i.name }}</p>
                        <p>{{ i.attrsText }}</p>
                      </div>
                    </a>
                  </td>
                  <td>&yen;{{ i.price }}</td>
                  <td>{{ i.count }}</td>
                  <td>&yen;{{ i.price * i.count }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        <!-- 支付方式 -->
        <section>
          <h3 class="box-title">支付方式</h3>
          <div class="box-body">
            <a class="my-btn" :class="{ active: payType === '在线支付' }" @click="payType = '在线支付'">
              在线支付
            </a>
          </div>
        </section>

        <!-- 支付渠道 -->
        <section>
          <h3 class="box-title">支付渠道</h3>
          <div class="box-body">
            <a class="my-btn" :class="{ active: payChannel === '余额支付' }" @click="payChannel = '余额支付'">
              余额
            </a>
            <a class="my-btn" :class="{ active: payChannel === '微信支付' }" @click="payChannel = '微信支付'">
              微信
            </a>
            <a class="my-btn" :class="{ active: payChannel === '支付宝支付' }" @click="payChannel = '支付宝支付'">
              支付宝
            </a>
          </div>
        </section>

        <!-- 备注 -->
        <section>
          <h3 class="box-title">备注</h3>
          <el-input v-model="buyerMessage" style="width: 300px" :rows="3" type="textarea" />
        </section>

        <!-- 金额明细 -->
        <section>
          <h3 class="box-title">金额明细</h3>
          <div class="box-body">
            <div class="total">
              <dl>
                <dt>商品件数：</dt>
                <dd>{{ checkInfo.summary?.goodsCount }}件</dd>
              </dl>
              <dl>
                <dt>商品总价：</dt>
                <dd>¥{{ checkInfo.summary?.totalPrice.toFixed(2) }}</dd>
              </dl>
              <dl>
                <dt>运<i></i>费：</dt>
                <dd>¥{{ checkInfo.summary?.postFee.toFixed(2) }}</dd>
              </dl>
              <dl>
                <dt>应付总额：</dt>
                <dd class="price">
                  {{ checkInfo.summary?.totalPayPrice.toFixed(2) }}
                </dd>
              </dl>
            </div>
          </div>
        </section>

        <!-- 提交订单 -->
        <section>
          <div class="submit">
            <el-button @click="createOrder" type="primary" size="large">提交订单</el-button>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  getCheckInfoAPI,
  createOrderAPI,
} from "@/apis/order";
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { useCartStore } from "@/stores/cartStore";
import AddressDialog from "@/components/Address/AddressDialog.vue";

// 引入依赖和组件
const cartStore = useCartStore();
const router = useRouter();

// 响应式数据
const checkInfo = ref({});
const curAddress = ref({});
const addressDialog = ref(null);
const buyerMessage = ref("");

// 支付方式和支付渠道
const payType = ref("在线支付"); // 默认支付方式
const payChannel = ref("余额支付"); // 默认支付渠道

// 生命周期钩子
onMounted(() => getCheckInfo());

// 获取结算信息
const getCheckInfo = async () => {
  const res = await getCheckInfoAPI();
  checkInfo.value = res.data;
  curAddress.value = checkInfo.value.defaultAddress;
};

const openDialog = () => {
  addressDialog.value.open();
};

// 编辑对话框成功回调
const onSuccess = (address) => {
  curAddress.value = address;
};

// 创建订单
const createOrder = async () => {
  const res = await createOrderAPI({
    payType: payType.value,
    payChannel: payChannel.value,
    buyerMessage: buyerMessage.value,
    orderGoodsList: checkInfo.value.orderGoodsList,
    addressId: curAddress.value.id,
  });
  if (res.code == 1) {
    const orderId = res.data.id;
    router.push({
      path: "/pay",
      query: {
        id: orderId,
      },
    });
    // 更新购物车
    cartStore.updateNewList();
  };
};

</script>

<style scoped lang="scss">
.xtx-pay-checkout-page {
  margin-top: 20px;

  .wrapper {
    background: #fff;
    padding: 0 20px;

    .box-title {
      font-size: 16px;
      font-weight: normal;
      padding-left: 10px;
      line-height: 70px;
      border-bottom: 1px solid #f5f5f5;
    }

    .box-body {
      padding: 20px 0;
    }
  }
}

.address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;

  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;

    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }

    >ul {
      flex: 1;
      padding: 20px;

      li {
        line-height: 30px;

        span {
          color: #999;
          margin-right: 5px;

          >i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
  }

  .action {
    width: 420px;
    text-align: center;

    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;

      &:first-child {
        margin-right: 10px;
      }
    }
  }
}

.goods {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  .info {
    display: flex;
    text-align: left;

    img {
      width: 70px;
      height: 70px;
      margin-right: 20px;
    }

    .right {
      line-height: 24px;

      p {
        &:last-child {
          color: #999;
        }
      }
    }
  }

  tr {
    th {
      background: #f5f5f5;
      font-weight: normal;
    }

    td,
    th {
      text-align: center;
      padding: 20px;
      border-bottom: 1px solid #f5f5f5;

      &:first-child {
        border-left: 1px solid #f5f5f5;
      }

      &:last-child {
        border-right: 1px solid #f5f5f5;
      }
    }
  }
}

.my-btn {
  width: 228px;
  height: 50px;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 48px;
  margin-right: 25px;
  color: #666666;
  display: inline-block;

  &.active,
  &:hover {
    border-color: $xtxColor;
  }
}

.total {
  dl {
    display: flex;
    justify-content: flex-end;
    line-height: 50px;

    dt {
      i {
        display: inline-block;
        width: 2em;
      }
    }

    dd {
      width: 240px;
      text-align: right;
      padding-right: 70px;

      &.price {
        font-size: 20px;
        color: $priceColor;
      }
    }
  }
}

.submit {
  text-align: right;
  padding: 60px;
  border-top: 1px solid #f5f5f5;
}
</style>